// ignore_for_file: deprecated_member_use
import 'package:animation/components/z_video/zsn_providers.dart';
import 'package:animation/components/z_video/zsn_video.dart';
import 'package:animation/model/play_video_base.dart';
import 'package:bot_toast/bot_toast.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class VideoPlay extends StatefulWidget {
  final List<PlayVideoBase> videoList;
  final int activeIndex;
  final String title;
  const VideoPlay({
    super.key,
    required this.videoList,
    required this.activeIndex,
    required this.title,
  });

  @override
  State<VideoPlay> createState() => _VideoPlayState();
}

class _VideoPlayState extends State<VideoPlay> with TickerProviderStateMixin {
  int _curActiveIdx = 0;

  @override
  void initState() {
    super.initState();
    setState(() {
      _curActiveIdx = widget.activeIndex;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> childWidget = [
      Container(
        color: Theme.of(context).colorScheme.primaryContainer,
        padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
        width: double.infinity,
        child: Text(
          widget.title,
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      SizedBox(height: 5),
      Flex(
        direction: Axis.horizontal,
        spacing: 5,
        children: [
          Expanded(
            child: SizedBox(
              height: 25,
              child: ListView(
                shrinkWrap: true,
                // 水平方向
                scrollDirection: Axis.horizontal,
                children: [
                  for (int i = 0; i < widget.videoList.length; i++)
                    GestureDetector(
                      onTap: () {
                        setState(() {
                          _curActiveIdx = i;
                        });
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          color: _curActiveIdx == i
                              ? Theme.of(context).colorScheme.primary
                              : Theme.of(context).colorScheme.primaryContainer,
                        ),
                        padding: EdgeInsets.only(
                            top: 3, bottom: 3, right: 10, left: 10),
                        margin: EdgeInsets.only(left: 5, right: 5),
                        child: Center(
                          child: Text(
                            widget.videoList[i].title,
                            style: TextStyle(
                              color: _curActiveIdx == i ? Colors.white : null,
                            ),
                          ),
                        ),
                      ),
                    )
                ],
              ),
            ),
          ),
          InkWell(
            onTap: () {
              // 打开底部弹窗
              showModalBottomSheet(
                  // 圆角
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(0),
                        topRight: Radius.circular(0)),
                  ),
                  context: context,
                  builder: (BuildContext context) {
                    return Padding(
                      padding: EdgeInsets.all(8.0),
                      child: Column(
                        children: [
                          Expanded(
                            child: _buildVideoList(),
                          )
                        ],
                      ),
                    );
                  });
            },
            child: Text('展开'),
          ),
          SizedBox(width: 10)
        ],
      )
    ];
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
        backgroundColor: Theme.of(context).colorScheme.primaryContainer,
        surfaceTintColor: Theme.of(context).colorScheme.primaryContainer,
      ),
      body: Consumer<ZsnProviders>(
        builder: (context, provider, child) {
          return Column(
            children: [
              ZsnVideo(
                videoUrl: widget.videoList[_curActiveIdx].url,
                title: widget.videoList[_curActiveIdx].long_title,
                rightWidgets: [
                  TextButton(
                    onPressed: () {
                      Scaffold.of(context).openEndDrawer();
                    },
                    child: Text(
                      '剧集',
                      style: TextStyle(
                        color: Colors.white,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ],
                leftWidgets: [
                  IconButton(
                    icon: Icon(
                      Icons.last_page_outlined,
                      color: Colors.white,
                    ),
                    onPressed: () {
                      if (_curActiveIdx < widget.videoList.length - 1) {
                        setState(() {
                          _curActiveIdx++;
                        });
                      } else {
                        BotToast.showText(text: '已经是最后一集了');
                      }
                    },
                  ),
                ],
              ),
              // VideoBase(videoUrl: widget.videoList[_curActiveIdx]['mp4']),
              if (!provider.isFullScreen)
                for (int i = 0; i < childWidget.length; i++) childWidget[i]
            ],
          );
        },
      ),
      endDrawer: Drawer(
        // 设置抽屉从右侧滑出
        elevation: 0,
        backgroundColor: Colors.black.withOpacity(0.5),
        // 圆角
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(0),
            bottomLeft: Radius.circular(0),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: _buildVideoList(),
        ),
      ),
    );
  }

  Widget _buildVideoList() {
    return GridView.builder(
        itemCount: widget.videoList.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          childAspectRatio: 3,
        ),
        itemBuilder: (context, index) {
          return Material(
            color: _curActiveIdx == index
                ? Theme.of(context).colorScheme.primary
                : Theme.of(context).colorScheme.primaryContainer,
            borderRadius: BorderRadius.circular(5),
            shadowColor: Theme.of(context).colorScheme.shadow,
            clipBehavior: Clip.antiAlias,
            child: InkWell(
              onTap: () {
                // 更新外部页面的状态
                Navigator.pop(context);
                setState(() {
                  _curActiveIdx = index;
                });
              },
              child: Center(
                  child: Text(widget.videoList[index].title,
                      style: TextStyle(
                        color: _curActiveIdx == index ? Colors.white : null,
                      ))),
            ),
          );
        });
  }
}
